{extend name="public/base"}

{block name="css"}
<link href="/static/plugins/jquery-treetable/css/jquery.treetable.css" rel="stylesheet">
<link href="/static/plugins/jquery-treetable/css/jquery.treetable.theme.default.css" rel="stylesheet">
{/block}

{block name="content"}
<div class="container-fluid">

    <div class="row">
        <div class="col-12">
            <div class="card-box">
                <div class="search-box">
                    <div class="col-sm-2"> 
                        <a href="#add-edit-modal" class="btn btn-custom waves-effect waves-light btn-md" data-animation="fadein" data-plugin="custommodal"
                                       data-overlaySpeed="200" data-overlayColor="#36404a" id="add-btn">+ 添加</a>
                    </div>
                    <div class="col-sm-10">
                        <form action="{:url('SysRole/index')}" method="get" class="form-inline form-inline-right">
                            <div class="form-group m-r-10">
                                <input type="text" class="form-control" name="role_name" value="{:isset($params.role_name) ? $params.role_name : ''}" placeholder="角色名">
                            </div>
                            <button type="submit" class="btn btn-custom waves-effect waves-light btn-md">
                                查询
                            </button>
                            <a href="{:url('SysRole/index')}" class="btn btn-custom waves-effect waves-light btn-md clear-search">清空</a>
                        </form>
                    </div>
                </div>
                <div class="table-rep-plugin">
                    <div class="table-responsive" data-pattern="priority-columns">
                        <table id="tech-companies-1" class="table  table-striped">
                            <thead>
                            <tr>
                                <th>角色ID</th>
                                <th data-priority="1">角色名</th>
                                <th data-priority="3">备注</th>
                                <th data-priority="1">排序</th>
                                <th data-priority="3">状态</th>
                                <th data-priority="3">创建时间</th>
                                <th data-priority="6">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                                {foreach $list as $item}
                                    <tr>
                                        <td>{$item.id}</td>
                                        <td>{$item.role_name}</td>
                                        <td>{$item.remark}</td>
                                        <td>{$item.sort}</td>
                                        <td><span class="{$item.status==1 ? 'status-on' : 'status-off'}">{$item.statusName}</span></td>
                                        <td>{$item.create_time}</td>
                                        <td class="actions">
                                            <a href="#has-auth" class="on-default edit-row authorize-btn" data-animation="fadein" data-plugin="custommodal"
                                            data-overlaySpeed="200" data-overlayColor="#36404a" data-id="{$item.id}" data-url="{:url('SysRole/permissions',['id'=>$item.id])}">授权</a>
                                            <a href="#add-edit-modal" class="on-default edit-row edit-btn" data-animation="fadein" data-plugin="custommodal"
                                            data-overlaySpeed="200" data-overlayColor="#36404a" data-url="{:url('SysRole/info',['id'=>$item.id])}">编辑</a>
                                            <a href="javacript:;" class="on-default remove-row delete-btn" data-url="{:url('SysRole/delete',['ids'=>$item.id])}">删除</a>
                                        </td>
                                    </tr>
                                {/foreach}
                            </tbody>
                        </table>
                        <div class="page-web">
                            {$page|raw}
                        </div>
                        
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!-- end row -->

    <!-- Modal -->
    <div id="add-edit-modal" class="modal-demo">
        <button type="button" class="close" onclick="Custombox.close();">
            <span>&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="custom-modal-title"></h4>
        <div class="custom-modal-text">
            <form class="add-edit-form" method="post">
                <div class="form-group">
                    <label for="roleNme">角色名称<span class="text-danger">*</span></label>
                    <input type="text" name="role_name" parsley-trigger="change" required
                           placeholder="请输入角色名称" class="form-control" id="roleNme">
                </div>
                <div class="form-group">
                    <label for="sort">备注</label>
                    <textarea rows="5" name="remark" parsley-trigger="change" 
                    placeholder="简单描述" class="form-control" id="remark"></textarea>
                </div>
                <div class="form-group">
                    <label for="sort">排序</label>
                    <input type="text" name="sort" parsley-trigger="change"
                           placeholder="0" class="form-control" id="sort">
                </div>

                <div class="form-group">
                    <label for="status">状态</label>
                    <select class="form-control" name="status">
                        {foreach $statusList as $status}
                        <option value="{$status.code}">{$status.desc}</option>
                        {/foreach}
                    </select>
                </div>

                <div class="form-group text-center m-b-0">
                    <input type="hidden" name="id" >
                    <button class="btn btn-custom waves-effect waves-light" type="submit">确定</button>
                </div>

            </form>
        </div>
    </div>

    <!-- Modal -->
    <div id="has-auth" class="modal-demo">
        <button type="button" class="close" onclick="Custombox.close();">
            <span>&times;</span><span class="sr-only">Close</span>
        </button>
        <h4 class="custom-modal-title">授权</h4>
        <div class="custom-modal-text">
            <div class="table-rep-plugin">
                <div class="table-authorize" data-pattern="priority-columns">
                    <form class="authorize-form" action="{:url('SysRole/authorize')}" method="post">
                        <table class="tree-table tree-table-checkbox">
                            <tbody>
                                {foreach $menuList as $item}
                                    <tr data-tt-id="{$item.id}" data-tt-parent-id="{$item.parent_id}">
                                        <td>
                                            <span class="checkbox checkbox-purple">
                                                <input id="checkbox{$item.id}" class="checkbox-input checkbox-input-{$item.parent_id}" name="menus[]" value="{$item.id}" type="checkbox" data-id="{$item.id}" data-pid="{$item.parent_id}">
                                                <label for="checkbox{$item.id}">
                                                    {$item.menu_name}
                                                </label>
                                            </span>
                                        </td>
                                    </tr>
                                {/foreach}
                            </tbody>
                        </table>
                        <input type="hidden" class="authorize-role-id">
                        <div class="form-group text-center m-b-0">
                            <input class="authorize-role-id" type="hidden" name="id" >
                            <button class="btn btn-custom waves-effect waves-light" type="submit">确定</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

</div> <!-- container -->
{/block}

{block name="script"}
<script src="/static/plugins/jquery-treetable/jquery.treetable.js"></script>

<script>
    const addEditConfig = {
     'addUrl': "{:url('SysRole/add')}",
     'editUrl': "{:url('SysRole/edit')}"
    }
    const addData = {
     status:1
    }

    $(".tree-table").treetable({
        expandable: true,
        initialState: "collapsed"
    });

    // 复选框
    $('.checkbox-input').on('change', function() { 
        let _this = $(this);
        let id = $(this).data('id');
        let pid = $(this).data('pid');

        $('.checkbox-input').each(function(){
            if (id == $(this).data('pid')) {
                // 当前checkbox设置为选中
                $(this).prop('checked', _this.is(':checked'));
                // 当前checkbox的子集设置为选中
                $('.checkbox-input-' + $(this).data('id')).prop('checked', _this.is(':checked'));
            }

            if (pid == $(this).data('id')) {
                let pid2 = $(this).data('pid')
                if ($('.checkbox-input-' + pid + ':checked').length < 1 || _this.is(':checked')) {
                    $(this).prop('checked', _this.is(':checked'));
                } 
            }
        })
    });  

    $(document).on('click', '.authorize-btn', function() {
        $(".authorize-role-id").val($(this).data('id'));
        $('.checkbox-input').prop('checked', false);

        $.get($(this).data('url'), function(response) {  
            if (response.code == 200) {
                const list = response.data
                const menuIds = list.map(item => item.id);
                console.log(menuIds)
                $('.checkbox-input').each(function(){
                    if (menuIds.includes($(this).data('id'))) {
                        $(this).prop('checked', true);
                    }
                })
            } 
        }).fail(function(jqXHR, textStatus, errorThrown) {  
            layer.msg("Request failed") 
        });  
    })

    // 提交表单
    $(document).on('submit', '.authorize-form', function(event) { 
        // 阻止表单的默认提交行为   
        event.preventDefault(); 

        $.post($(this).attr('action'), $(this).serialize(), function(response) {  
            layer.msg(response.msg);
            if (response.code == 200) {
                setTimeout(function() { location.reload(); }, 2000);
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {  
            layer.msg("Request failed") 
        });  
    })
 </script>
{/block}

